<template>
  <div class="login">
      <van-form class="form" @submit="onLogin">
          <div class="avatar">
              <img src="/assets/images/avatar.png" />
          </div>

          <van-field
              v-model="business.mobile"
              name="mobile"
              placeholder="手机号码"
              left-icon="phone-o"
              required
              :rules="[
                  { required: true, message: '请填写手机号码' },
                  { pattern: /^1[3-9]\d{9}$/, message: '手机号码格式不正确' },
              ]"
          />

          <van-field
              v-model="business.password"
              type="password"
              name="password"
              placeholder="密码"
              left-icon="warn-o"
              required
              :rules="[{ required: true, message: '请填写密码' }]"
          />

          <div class="button">
              <van-button
                  round
                  block
                  color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)"
                  native-type="submit"
              >
                  注册 / 登录
              </van-button>
          </div>

          <div class="forget">
              <router-link to="/">返回首页</router-link>
          </div>
      </van-form>
  </div>
</template>

<script setup>
const { proxy } = getCurrentInstance();

const business = reactive({
  mobile: '13900000000',
  password: '123',
});

const onLogin = async () =>
{
  let result = await proxy.$http.post({
      url:'/business/login',
      params:business
  })

  if(result.code === 1)
  {
      proxy.$success({
          message:result.msg,
          onClose:() =>
          {
              // 赋值
              proxy.$business.value = result.data;

              proxy.$router.push('/business');
          }
      })
  }else{
      proxy.$warning(result.msg);
  }
}
</script>

<style scoped>
@import url('/assets/css/login.css');
</style>
